<template>
  <div class="login">
    <div class="login_box">
      <div class="title" :style="login_title_style">
        <span>{{ $t('云盾金融系统') }}</span>
      </div>
      <div style="position: relative">
        <div class="login_title">
          <div class="title_text">{{ $t('登录') }}</div>
        </div>
      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="rulesForm" class="login_form">
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont iconzhanghao" v-model="loginForm.username"
                    :placeholder="$t('账号')"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont iconmima" show-password :placeholder="$t('密码')"
                    v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div style="display: flex;align-items: center">
            <el-input style="width: 70%" :placeholder="$t('验证码')"
                      v-model="loginForm.code"></el-input>
            <img
                class="cursor_pointer"
                @click="getCode"
                style="width: 30%; height: 100%"
                :src="url"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <div style="padding: 10px">
            <el-button type="primary" :loading="loading" @click="onLogin" style="width: 100%">{{ $t('登录') }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
<!--    <div class="footer">@Fangshuo Investment Holding (Shenzhen) Co., Ltd.</div>-->
  </div>
</template>

<script>
import qs from 'qs'
import {fetchCode, onLogin} from "@/api/system";
import {setTimeZone} from '@/utils/tools'
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        code: ''
      },
      loading: false,
      url: '',
      codeKey: '',
      rulesForm: {
        username: [
          {required: true, message: this.$t('请输入员工账号'), trigger: 'blur'}
        ],
        password: [
          {required: true, message: this.$t('请输入密码'), trigger: 'blur'}
        ],
        code: [
          {required: true, message: this.$t('请输入验证码'), trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    login_title_style() {
      const local = this.$i18n.locale
      return local === 'zh_CN' ? {
        top: '-30%'
      } : {
        width: '500px',
        fontSize: '30px'
      }
    }
  },
  mounted() {


    if (process.env.NODE_ENV === 'development') {
      this.loginForm.username = 'admin'
      this.loginForm.password = 'admin123'
    }
    this.getCode()
    document.onkeydown = (ev) => {
      if (this.$route.path === '/login') {
        if (ev.key === 'Enter') {
          this.onLogin()
        }
      }
    }
  },
  methods: {

    async getCode() {
      this.codeKey = new Date().getTime().toString() + this.GetRandomNum(0, 9999)
      const res = await fetchCode({key: this.codeKey,})
      this.url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    },
    // 随机数
    GetRandomNum(Min, Max) {
      let Range = Max - Min;
      let Rand = Math.random();
      return (Min + Math.round(Rand * Range)).toString();
    },
    onLogin() {
      this.$refs['loginForm'].validate(async (v) => {
        if (v) {
          this.loading = true
          const params = {
            accountNumber: this.loginForm.username,
            password: this.loginForm.password,
            validateCode: this.loginForm.code,
            key: this.codeKey
          }
          try {
            const res = await onLogin(qs.stringify(params))
            if (res.code === 1) {
              const {token, systemUser} = res.data
              sessionStorage.setItem('userInfo', JSON.stringify(systemUser))
              sessionStorage.setItem('token', token)
              await this.$router.push('/homePage/index')
              this.$message.success(this.$t('登录成功'))
            } else {
              this.getCode()
              this.loading = false
            }
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 1024px ) {
  .login {
    min-height: 100vh !important;
    min-width: 100%;

    .login_box {
      left: 50% !important;
      right: 0 !important;
      transform: translate(-50%, -50%) !important;
      width: 320px !important;
    }
  }
}

.login {
  min-height: 100%;
  min-width: 100%;
  background-image: url("../assets/login_bg.png");
  background-size: 100% 100%;
  position: relative;

  .login_box {
    width: 350px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: 10%;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
    transform: translateY(-50%);

    .title {
      position: absolute;
      top: -30%;
      width: 100%;
      text-align: center;
      left: 50%;
      transform: translateX(-50%);
      font-size: 40px;
      font-family: PingFang SC;

      span {
        color: #ffffff;

      }
    }

    .login_title {
      padding: 5px;
      box-sizing: border-box;

      .title_text {
        letter-spacing: 1px;
        text-align: center;
        color: #FF8A00;
        font-size: 20px;
      }
    }

    ::v-deep .el-input__inner {
      background-color: #F5F5F5;
    }

    //.login_title::before {
    //  content: "";
    //  width: 10%;
    //  height: 1px;
    //  border-bottom: 1px solid;
    //  display: block;
    //  position: absolute;
    //  left: 25px;
    //  top: 50%;
    //  color: #66bfff;
    //}
    //
    //.login_title::after {
    //  content: "";
    //  width: 10%;
    //  height: 1px;
    //  border-bottom: 1px solid;
    //  display: block;
    //  position: absolute;
    //  top: 50%;
    //  right: 25px;
    //  color: #66bfff;
    //}
  }

  .login_form {
    margin-top: 10px;
  }
  .footer{
    position: absolute;
    width:100%;
    bottom:0;
    color: #675757;
    padding: 10px 0;
    font-size: 18px;
    text-align: center;
  }
}
</style>
